<template>
  <div>
    <div class="form">
      <input type="number" id="year" min="1800"  max="3000" v-model="year" />年<input type="number" id="month" min="1" max="12" v-model="month" />月<input type="number" id="day" min="1" max="31" v-model="day" />日<input type="number" min="0" max="24" id="hour" v-model="hour"/>时<input type="number" min="0" max="60" id="minute" v-model="minute"/>分
      <select name="sex" id="sex" v-model="sex">
        <option value="0">女</option>
        <option value="1">男</option>
      </select>
      <button @click="getDate">查询</button>
    </div>
    <div class="result">
      <div class="line">{{result}}</div>
      <div class="line">
        <div class="cell">八字：</div>
        <div class="cell">{{char8[0]}}</div>
        <div class="cell">{{char8[1]}}</div>
        <div class="cell">{{char8[2]}}</div>
        <div class="cell">{{char8[3]}}</div>
      </div>
      <div class="line">
        <div class="cell">五行：</div>
        <div class="cell">{{char8Ele5[0]}}{{char8Ele5[1]}}</div>
        <div class="cell">{{char8Ele5[2]}}{{char8Ele5[3]}}</div>
        <div class="cell">{{char8Ele5[4]}}{{char8Ele5[5]}}</div>
        <div class="cell">{{char8Ele5[6]}}{{char8Ele5[7]}}</div>
      </div>
      <div class="line">
        <div class="cell">纳音：</div>
        <div class="cell">{{takeSound[0]}}</div>
        <div class="cell">{{takeSound[1]}}</div>
        <div class="cell">{{takeSound[2]}}</div>
        <div class="cell">{{takeSound[3]}}</div>
      </div>
    </div>
    <div class="line">
      {{total}}
    </div>
  </div>
</template>
<script setup>
import lunisolar from 'lunisolar'
import  char8ex  from 'lunisolar/plugins/char8ex'

import {  ref,reactive } from 'vue';

lunisolar.extend(char8ex)
// lunisolar.extend(takeSound)
let year = ref('')
let month = ref('')
let day = ref('')
let hour = ref('')
let minute = ref('')
let result = ref('')
let sex = ref('')
let char8 =ref([])
let takeSound  = ref([])
let char8Ele5 = ref([])
let total = ref('')

function getDate(){
  // console.log(lunisolar('2023-01-15 12:26').char8ex(1));

  let lunData = lunisolar(`${year.value}/${month.value}/${day.value} ${hour.value}:${minute.value}`)


  result.value = lunData.format('lY年 lM(lL)lD lH時')
  let lunYear = lunData.char8.year
  let lunMonth = lunData.char8.month
  let lunDay = lunData.char8.day
  let lunHour= lunData.char8.hour
  char8.value = [lunYear.name,lunMonth.name,lunDay.name,lunHour.name]
  char8Ele5.value = [lunYear.stem.e5.name,lunYear.branch.e5.name,lunMonth.stem.e5.name,lunMonth.branch.e5.name,lunDay.stem.e5.name,lunDay.branch.e5.name,lunHour.stem.e5.name,lunHour.branch.e5.name]
  takeSound.value = [lunYear.takeSound,lunMonth.takeSound,lunDay.takeSound,lunHour.takeSound]

  let jN=0
  let mN=0
  let sN=0
  let hN=0
  let tN=0

  char8Ele5.value.forEach(ele=>{
    switch (ele) {
      case '金':
      jN++
        break;
        case '木':
      mN++
        break;
        case '水':
      sN++
        break;
        case '火':
      hN++
        break;
        case '土':
      tN++
        break;
      default:
        break;
    }
  })
  total.value = `${jN}金  ${mN}木  ${sN}水  ${hN}火  ${tN}土`

}
</script>
<style scoped>
.form input{
  width: 50px;
}
.line{
  display:flex;
  margin-top: 8px;
}
.cell{
  margin-left: 8px;
  width: 100px;
  text-align: center;
}
</style>